<template>
  <view>
    <uni-status-bar></uni-status-bar>
    <uni-nav-bar left-icon="back" :title="title" class="fw-b" :border="false" backgroundColor="rgba(0,0,0,0)" :right-width="63" @clickLeft="$tools.goBack(1)">
      <view class="rows rowsm" slot="right">
        <view class="w-126 h-50 br-25 rowsc rowsm colfff fs-24 fw-b" style="background: linear-gradient(to bottom,#FFC234,#FF9A30);" v-if="active == 0" @click="urgeAll()">一键督促</view>
      </view>
    </uni-nav-bar>
    <view class="w100 rowsa rowsm h-72">
      <view class="" @click="active = 0,getList()" :class="{'fw-b fs-30':active == 0,'fs-28':active != 0}" :style="active == 0 ? 'color:#4878FF;' : 'color:#888;'">未完成</view>
      <view class="" @click="active = 1,getList()" :class="{'fw-b fs-30':active == 1,'fs-28':active != 1}" :style="active == 1 ? 'color:#4878FF;' : 'color:#888;'">已完成</view>
    </view>
    
    <view class="w100 pl-24 pr-24 mb-20">
      
      <view class="w100 h-68 br-34 pl-36 pr-4 rowsb rowsm" style="border: 2rpx solid #4886FF;">
        <input type="text" placeholder="输入姓名、学号等进行搜索查询" placeholder-class="fs-26 col888" v-model="stNumberOrName">
        <view class="w-98 h-60 br-30 rowsc rowsm" style="background: linear-gradient(to bottom,#4897FF,#4878FF);" @click="getList">
          <image src="/static/icon_4ss.png" class="w-28 h-28" mode=""></image>
        </view>
      </view>
    </view>
    
    <view class="w100 rowsb rowsm h-100">
      <view class="w-90 h100 rowsc rowsm fs-28 col000">序号</view>
      <view class="w-160 h100 rowsc rowsm fs-28 col000">姓名</view>
      <view class="w-140 h100 rowsc rowsm fs-28 col000">学号</view>
      <view class="w-140 h100 rowsc rowsm fs-28 col000">进度</view>
      <view class="w-90 h100 rowsc rowsm fs-28 col000">成绩</view>
      <view class="w100 h100 rowsc rowsm fs-28 col000" v-if="active == 0">操作</view>
    </view>
    
    <view class="w100 rowsb rowsm h-120" v-for="(item,index1) in list" :key="index1" :style="index1 % 2 == 0 ? 'background-color: #F7F6FA;' : 'background-color: #fff;'">
      <view class="w-90 h100 rowsc rowsm fs-26 col000">{{index1 + 1}}</view>
      <view class="w-160 h100 rowsc rowsm fs-26 col000">{{item.name}}</view>
      <view class="w-140 h100 rowsc rowsm fs-26 col000">{{item.stNumber}}</view>
      <view class="w-140 h100 rowsc rowsm fs-26 col000">{{index == 0 ? Number(item.jcldJdPer).toFixed(2) : index == 1 ? Number(item.ldzjJdPer).toFixed(2) : index == 2 ? Number(item.ldcgJdPer).toFixed(2) : Number(item.ldgyJdPer).toFixed(2)}}%</view>
      <view class="w-90 h100 rowsc rowsm fs-26" style="color: #FF9934;">{{index == 0 ? Number(item.userjcldCj).toFixed(2) : index == 1 ? item.userldzjCj : index == 2 ? item.userldcgCj : item.userldgyCj}}</view>
      <view class="w100 h100 rowsc rowsm" v-if="active == 0">
        <view class="w-96 h-44 br-22 rowsc rowsm fs-24" style="border: 2rpx solid #4878FF;color: #4878FF;" v-if="active == 0" @click.stop="urge(item.userId)">督促</view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        active:0,
        id:'',
        index:'',
        list:[],
        title:'',
        stNumberOrName:'',
         total:0,
        limit: {
          pageNum: 1,
          pageSize: 20
        },
      };
    },
    onLoad(e) {
      this.id = e.id
      this.index = e.index
      console.log()
      if(this.index == 0){
        this.title = '基础劳动完成进度'
      }
      if(this.index == 1){
        this.title = '劳动总结报告完成进度'
      }
      if(this.index == 2){
        this.title = '劳动成果完成进度'
      }
      if(this.index == 3){
        this.title = '社会公益劳动完成进度'
      }
      this.getList()
    },
     // 下拉到底部后加载新数据
    onReachBottom() {
      if (this.list.length < this.total) {
        this.limit.pageNum++;
        this.getList()
      }
    },
    methods:{
      urgeAll(){
        this.list.forEach(item => {
          this.urge(item.userId)
        })
      },
      urge(id){
        this.$tools.axiosFromToken('POST','prouserdc/dcSt',{userId:id,content:this.index == 0 ? '请尽快完成劳动教育课程基础劳动部分' : this.index == 1 ? '请尽快完成劳动教育课程劳动总结报告部分' : this.index == 2 ? '请尽快完成劳动教育课程劳动成果部分' : '请尽快完成劳动教育课程社会公益劳动部分'},'加载中').then(res => {
          this.$tools.showtt(res.msg)
          if(res.code != 200) return
          // setTimeout(() => {
          //   this.$tools.goBack(1)
          // },1000)
        })
      },
      getList(){
        this.$tools.axiosFromToken('POST',`prouser/listSt?pageNum=${this.limit.pageNum}&pageSize=${this.limit.pageSize}`,{
          clId:this.id,
          stNumberOrName:this.stNumberOrName
          },'加载中').then(res => {
          if(res.code != 200) return this.$tools.showtt(res.msg)
          let {rows} = res
          if(this.active == 0){
            if(this.index == 0){
              if (this.limit.pageNum == 1) {
                this.list = res.rows.filter(item => item.jcldJdCount == 1)
              } else {
                this.list = [...this.list, ...res.rows];
                this.list = rows.filter(item => item.jcldJdCount == 1)
              }
            }
            if(this.index == 1){
              // this.list = rows.filter(item => item.ldzjJdCount == 1)
               if (this.limit.pageNum == 1) {
                this.list = res.rows.filter(item => item.ldzjJdCount == 1)
                this.list = [...this.list, ...res.rows];
                this.list = rows.filter(item => item.ldzjJdCount == 1)
              }
            }
            if(this.index == 2){
              // this.list = rows.filter(item => item.ldcgJdCount == 1)
               if (this.limit.pageNum == 1) {
                this.list = res.rows.filter(item => item.ldcgJdCount == 1)
              } else {
                this.list = [...this.list, ...res.rows];
                this.list = rows.filter(item => item.ldcgJdCount == 1)
              }
            }
            if(this.index == 3){
              // this.list = rows.filter(item => item.ldgyJdCount == 1)
              if (this.limit.pageNum == 1) {
                this.list = res.rows.filter(item => item.ldgyJdCount == 1)
              } else {
                this.list = [...this.list, ...res.rows];
                this.list = rows.filter(item => item.ldgyJdCount == 1)
              }
            }
          }
          if(this.active == 1){
            if(this.index == 0){
              // this.list = rows.filter(item => item.jcldJdCount == 2)
              if (this.limit.pageNum == 1) {
                this.list = res.rows.filter(item => item.jcldJdCount == 2)
              } else {
                this.list = [...this.list, ...res.rows];
                this.list = rows.filter(item => item.jcldJdCount == 2)
              }
            }
            if(this.index == 1){
              // this.list = rows.filter(item => item.ldzjJdCount == 2)
              if (this.limit.pageNum == 1) {
                this.list = res.rows.filter(item => item.ldzjJdCount == 2)
              } else {
                this.list = [...this.list, ...res.rows];
                this.list = rows.filter(item => item.ldzjJdCount == 2)
              }
            }
            if(this.index == 2){
              // this.list = rows.filter(item => item.ldcgJdCount == 2)
               if (this.limit.pageNum == 1) {
                this.list = res.rows.filter(item => item.ldcgJdCount == 2)
              } else {
                this.list = [...this.list, ...res.rows];
                this.list = rows.filter(item => item.ldcgJdCount == 2)
              }
            }
            if(this.index == 3){
              // this.list = rows.filter(item => item.ldgyJdCount == 2)
              if (this.limit.pageNum == 1) {
                this.list = res.rows.filter(item => item.ldgyJdCount == 2)
              } else {
                this.list = [...this.list, ...res.rows];
                this.list = rows.filter(item => item.ldgyJdCount == 2)
              }
            }
          }
          
        })
      }
    }
  }
</script>

<style lang="scss">

</style>
